<template>
  <base-breadcrumb>
    <a-row :gutter="24" class="page-height">
      <!-- 左侧列表 -->
      <a-col :span="5">
        <a-card v-loading="loading"  class="page-height-tree">
          <div class="option-btns">
            <a-button type="primary" @click="addClass" v-if="hideBuquBtn()"> 新增</a-button>
            <a-button type="primary" :disabled="!selectRow.id" @click="editClass" v-if="hideBuquBtn()">编辑</a-button>
            <a-button type="danger" :disabled="!selectRow.id" @click="delClass()" v-if="hideBuquBtn()">删除</a-button>
            <!--            <a-button class="mb12 ml12" type="primary" @click="getClassList()">刷新</a-button>-->
          </div>
          <div class="l-wrapper">
            <div v-for="(item, index) in classList" :key="index" class="left-TypeList" :class="{ active: selectRow.id === item.id, disabled: item.status === 1 }" @click="rowClick(item)">
              {{ item.name }}{{ item.basicStatus == 1 ? '(不可用)' : '' }}
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 右侧表格 -->
      <a-col :span="19" class="permission-collapsed page-height-list-wrapper">
        <a-card  class="page-height-list">
          <a-button class="mb12" type="primary" @click="add" v-if="hideBuquBtn()">新增</a-button>
          <!--          <a-button class="mb12 ml12" type="primary" @click="$refs.table.refresh()">刷新</a-button>-->
          <list-table ref="table" :columns="columns" :request="loadData" :page-keys="['pageNo', 'pageSize', 'totalSize']" :show-page="false">
            <div slot="actions" slot-scope="text, record" class="pub-table-list-action">
              <span @click="edit(record)" v-if="hideBuquBtn()">编辑</span>
              <span @click="del(record)" v-if="hideBuquBtn()">删除</span>
            </div>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <add :visible.sync="visible" :form="form" @ok="$refs.table.refresh()" />
    <add-class-post :visible.sync="visible1" :form="selectRow" @ok="getClassList()" />
  </base-breadcrumb>
</template>

<script>
import add from './add'
import addClassPost from './addClassPost'
import api from '@/api/technical/constructionStage.js'

export default {
  name: 'a' + Date.now(),
  data() {
    return {
      visible: false,
      visible1: false,
      loading: false,

      classList: [],
      selectRow: { id: '' },
      form: {},
      columns: [
        {
          title: '指标',
          dataIndex: 'indexName'
        },
        {
          title: '责任人',
          dataIndex: 'liableName'
        },
        {
          title: '状态',
          dataIndex: 'statusStr',
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 150,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      tableIndex: 1,
      classIndex: 1,
      loadData: (q) => {
        if (this.selectRow.id) {
          console.log(this.selectRow)
          return api.findListByDetails({ id: this.selectRow.id }).then((res) => {
            this.tableIndex = (res.data.length && res.data[res.data.length - 1].sortNum + 1) || 1
            return res
          })
        }
        return { code: 200, data: [] }
      }
    }
  },
  components: {
    add,
    addClassPost
  },
  created() {
    this.getClassList()
  },
  mounted() {},
  methods: {
    async getClassList() {
      this.loading = true
      api.list().then((res) => {
        this.loading = false
        this.classList = res.data
        this.classIndex = (this.classList.length && this.classList[this.classList.length - 1].sortNum + 1) || 1
        this.selectRow = this.classList[0] || { id: '' }
        this.$refs.table.refresh()
      })
    },
    // 点击左边列表
    rowClick(item) {
      this.selectRow = item
      this.$refs.table.refresh()
    },
    addClass() {
      this.selectRow = { id: '', basicStatus: 0, sortNum: this.classIndex }
      this.category = '分类'
      this.visible1 = true
    },
    editClass() {
      this.visible1 = true
      this.category = '分类'
    },
    delClass() {
      this.$delList3(api.del, this.getClassList, { id: this.selectRow.basicInformationId }, null)
    },

    del(record) {
      this.$delList3(
        api.delDetail,
        (res) => {
          this.$refs.table.refresh()
        },
        { id: record.id },
        null
      )
    },
    add() {
      if (this.selectRow.basicInformationId) {
        this.form = { basicInformationId: this.selectRow.basicInformationId, name: this.selectRow.name, status: 0, sortNum: this.tableIndex }
        this.visible = true
      } else {
        this.$noticeWarning('请选择分类')
      }
    },
    edit(record) {
      if (this.selectRow.basicInformationId) {
        this.form = { ...record, name: this.selectRow.name }
        this.visible = true
      } else {
        this.$noticeWarning('请选择分类')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.option-btns {
  button {
    margin-right: 0.5rem;
  }
}

.l-wrapper {
  overflow: auto;
  // height: calc(100vh - 15rem);
}

.left-TypeList {
  margin: 10px 0;
  background: white;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;

  &.active {
    background: #0e7ed0 !important;
    color: white;
  }

  &.disabled {
    //cursor: not-allowed;
    background: gray;
    color: white;
  }
}
</style>
